<template>
    <Card class="bk">
        <CellGroup class="bkn">
            <Row >
                <Col span="12">
                    <img style="width: 100%;max-height: 500px;" :src="heard"/>
                </Col>
                <Col span="12">
<!--                    <li v-for="(item,index) in info" :key="index">-->
<!--                        <h2 v-if="index==0"><i>刘洪</i></h2>-->
<!--&lt;!&ndash;                        <h4 v-else><i :class="item.k">&nbsp;&nbsp;&nbsp;&nbsp;{{item.val}}</i></h4>&ndash;&gt;-->
<!--                        <h4 v-else><i class="">&nbsp;&nbsp;&nbsp;&nbsp;{{item.val}}</i></h4>-->
<!--                    </li>-->
                    <Row v-for="(item,index) in info" :key="index">
                        <Col style="font-size: 2vw; line-height: 1.1rem">{{item.val}}</Col>
                    </Row>
                </Col>
            </Row>
        </CellGroup>
    </Card>
</template>

<script>
export default {
    name: "About",
    emits: ["abc"],
    data() {
        return {
            msg: "个人简介",
            saying: "万千猿军一将，心怀架构梦想。",
            heard: require("../assets/heard1.png"),
            info: []
            // src: require("../assets/heard1.png"),
        };
    },
    methods: {
        infos() {
            this.$Sev.post("/nodejs/api/intro", {}, (data) => {
                this.info = data;
            });
        },
    },
    mounted() {
        this.$emit('abc', this.saying);
        this.infos();
    },
}
</script>


<style scoped>
/*.box {*/
/*    display: flex;*/
/*}*/
/*// 当浏览器窗口宽度大于600px时触发*!*!*/
/*@media (min-width: 600px) {*/
/*    .item {*/
/*        width: 100%;*/
/*    }*/
/*}*/
/*!*}// 当浏览器窗口宽度小于1000px时触发*!*/
/*// 自动换行，前提有display: flex;*!*!*/
/*@media (max-width: 1000px) {*/
/*    .box {*/
/*        flex-wrap: wrap;*/
/*    }*/
/*    .item {*/
/*        width: 50%;*/
/*    }*/
/*}*/
li {
    list-style-type:none;
}
.bk {
    /*background-image: url("../assets/1.png");*/
    /*background-size: 100% 100%;*/
    background-color: #9958a1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 88px 20px 70px;
}

.bkn {
    background-color: white;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 20px 20px 20px 20px;
}

/*//.demo{*/
/*//    color: lightcoral;*/
/*//    font-size: @font-size;*/
/*//    text-align: center;*/
/*//    margin: 0 0 0 0;*/
/*//    //background-image: url("../assets/default-cover.jpg");*/
/*//}*/
</style>